import { Menu,Icon,Switch } from 'antd';
import React,{ Component } from 'react';
import './css/sider.css'
import store from '../redux/index';

const { SubMenu } = Menu;

class Appsider extends Component{

    constructor(props){
        super(props);
        this.state = store.getState();
        this.changeTheme = this.changeTheme.bind(this)
        this.storeChange = this.storeChange.bind(this)
        store.subscribe(this.storeChange);
    }

    changeTheme = value =>{

        const action = {
            type:'chang_theme',
            payload:value,
        }

        store.dispatch(action);//将action传递给store
    }

    addTab = (e) => {
        // console.log(e);
        // console.log(e.key);

        const action = {
            type:'change_table_status',
            payload:this.state.isTableShow,
        }

        store.dispatch(action);
    }

    storeChange(){
        this.setState(store.getState())
    }

    render(){
        return(

            <div className="appsider">
                <Menu mode="inline" theme={this.state.theme} onClick={this.addTab.bind(this)}>

                    <SubMenu
                        key="sub1"
                        title={
                        <span>
                            <Icon type="setting" />
                            <span>后台管理</span>
                        </span>
                        }
                    >
                        <Menu.Item key="s1o1">
                        <span>
                            <Icon type="team" />
                            <span>用户管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s1o2">
                        <span>
                            <Icon type="skin" />
                            <span>角色管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s1o3">
                        <span>
                            <Icon type="menu" />
                            <span>菜单管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s1o4">
                        <span>
                            <Icon type="key" />
                            <span>权限管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s1o5">我的信息</Menu.Item>
                    </SubMenu>

                    <SubMenu
                        key="sub2"
                        title={
                        <span>
                            <Icon type="setting" />
                            <span>认证中心</span>
                        </span>
                        }
                    >
                        <Menu.Item key="s2o1">
                        <span>
                            <Icon type="appstore" />
                            <span>应用管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s2o2">
                        <span>
                            <Icon type="security-scan" />
                            <span>令牌管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s2o3">
                        <span>
                            <Icon type="global" />
                            <span>服务管理</span>
                        </span>
                        </Menu.Item>
                    </SubMenu>

                    <SubMenu
                        key="sub3"
                        title={
                        <span>
                            <Icon type="setting" />
                            <span>系统监控</span>
                        </span>
                        }
                    >
                        <Menu.Item key="s3o1">
                        <span>
                            <Icon type="appstore" />
                            <span>服务治理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s3o2">
                        <span>
                            <Icon type="security-scan" />
                            <span>注册中心</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s3o3">
                        <span>
                            <Icon type="global" />
                            <span>文档中心</span>
                        </span>
                        </Menu.Item>

                        <Menu.Item key="s3o4">
                        <span>
                            <Icon type="global" />
                            <span>系统管理</span>
                        </span>
                        </Menu.Item>

                        <Menu.Item key="s3o5">
                        <span>
                            <Icon type="global" />
                            <span>日志中心</span>
                        </span>
                        </Menu.Item>

                        <Menu.Item key="s3o6">
                        <span>
                            <Icon type="global" />
                            <span>代码生成器</span>
                        </span>
                        </Menu.Item>

                    </SubMenu>

                    <SubMenu
                        key="sub4"
                        title={
                        <span>
                            <Icon type="setting" />
                            <span>任务中心</span>
                        </span>
                        }
                    >
                        <Menu.Item key="s4o1">
                        <span>
                            <Icon type="solution" />
                            <span>任务管理</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s4o2">
                        <span>
                            <Icon type="solution" />
                            <span>调度日志</span>
                        </span>
                        </Menu.Item>
                        <Menu.Item key="s4o3">
                        <span>
                            <Icon type="solution" />
                            <span>执行器管理</span>
                        </span>
                        </Menu.Item>
                    </SubMenu>

                    <SubMenu>
                        <Menu.Item key="s501">
                            <Switch 
                            checked={this.state.theme === 'light'}
                            onChange={this.changeTheme} 
                            checkedChildren="Light"
                            unCheckedChildren="Dark"
                            />
                        </Menu.Item>
                    </SubMenu>

                    {/* <Switch 
                        checked={this.state.theme === 'light'}
                        onChange={this.changeTheme} 
                        checkedChildren="Light"
                        unCheckedChildren="Dark"
                        /> */}

                </Menu>
 
            </div>
        )
    }
}

export default Appsider;